import React from 'react';
import styles from "./index.css";
import "./index.css";
import { Button, Input, Layout, Card} from 'element-react';
import moment from 'moment';
import { questionAnswer } from '../../ai/api';


const { ipcRenderer } = require('electron');
var counterInterval = null;

class Grammar extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      progress: 0,
      inputContent: '',
      answer: '',
      submitLoading: false,
    }
  }

  submitQuestion = ()=>{
    this.setState({submitLoading: true, answer:'思考回答中...'})
    questionAnswer(this.state.inputContent, (data)=>{this.setState({submitLoading: false, answer:data})})
  }

  handleInputChange = (e) => {
    this.setState({inputContent:e});
  };

  showHistory= () => {
    
  };

  render() {
    return (
      <div className={styles.demoContainer}>
        <Layout.Row gutter="20" style={{'margin-left': '20px', 'margin-top': '30px'}}>
         <Layout.Col span="20">
            <Card id="answerBoard" style={{height:'300px'}}>
              {this.state.answer}
            </Card>
          </Layout.Col>
        </Layout.Row> 
        <Layout.Row gutter="20" style={{'margin-left': '20px', 'margin-top': '30px'}}>
          <Layout.Col span="24">
            <Button onClick={this.submitQuestion} style={{'margin-bottom': '10px'}} loading={this.state.submitLoading}>提问</Button>
            <Input id='customQuestionInput' type="textarea" value={this.state.inputContent} onChange={this.handleInputChange} placeholder='请输入你遇到的语法问题'/>
          </Layout.Col>
        </Layout.Row>          
      </div>
    );
  }
}

export default Grammar;